<template>
    <div class="container">
        <div
            class="logoBg"
            :style="{
        background: `linear-gradient(${direction}, ${rgba1} ${position1}%, ${rgba2} ${position2}%)`
      }"
        >
            <div class="logoBg2">
                <img src="@/assets/Alogo.png" />
            </div>
        </div>

        <div class="controls">
            <div class="control-group">
                <label>渐变方向</label>
                <select v-model="direction">
                    <option value="to right">左 ➜ 右</option>
                    <option value="to left">右 ➜ 左</option>
                    <option value="to bottom">上 ➜ 下</option>
                    <option value="to top">下 ➜ 上</option>
                    <option value="135deg">对角线 ↘</option>
                    <option value="45deg">对角线 ↗</option>
                </select>
            </div>

            <div class="color-control">
                <label>颜色 1
                    <input type="color" v-model="color1" />
                </label>
                <label>透明度
                    <input type="range" min="0" max="1" step="0.01" v-model="alpha1" />
                </label>
                <label>位置
                    <input type="range" min="0" max="100" step="1" v-model="position1" />
                </label>
                <span class="rgba-text">{{ rgba1 }} {{ position1 }}%</span>
            </div>

            <div class="color-control">
                <label>颜色 2
                    <input type="color" v-model="color2" />
                </label>
                <label>透明度
                    <input type="range" min="0" max="1" step="0.01" v-model="alpha2" />
                </label>
                <label>位置
                    <input type="range" min="0" max="100" step="1" v-model="position2" />
                </label>
                <span class="rgba-text">{{ rgba2 }} {{ position2 }}%</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "choseColor",
    data() {
        return {
            color1: "#ff0000",
            color2: "#0000ff",
            alpha1: 1,
            alpha2: 1,
            direction: "to right",
            position1: 0,
            position2: 100,
        };
    },
    computed: {
        rgba1() {
            return this.hexToRgba(this.color1, this.alpha1);
        },
        rgba2() {
            return this.hexToRgba(this.color2, this.alpha2);
        },
    },
    methods: {
        hexToRgba(hex, alpha) {
            const r = parseInt(hex.slice(1, 3), 16);
            const g = parseInt(hex.slice(3, 5), 16);
            const b = parseInt(hex.slice(5, 7), 16);
            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
        },
    },
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    background: #f7f7f7;
    min-height: 100vh;
}

.logoBg {
    width: 90%;
    max-width: 320px;
    aspect-ratio: 1/1;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: background 0.3s ease;
}

.logoBg2 img {
    width: 50%;
}

.controls {
    width: 100%;
    max-width: 500px;
    margin-top: 30px;
    background: #ffffff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.control-group,
.color-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

label {
    font-size: 15px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

input[type="color"] {
    border: none;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
}

input[type="range"] {
    width: 120px;
    accent-color: #007bff;
}

select {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
}

.rgba-text {
    font-family: monospace;
    font-size: 13px;
    color: #555;
}

@media (max-width: 600px) {
    .logoBg {
        width: 100%;
    }

    input[type="range"] {
        width: 100px;
    }

    select {
        width: 100%;
    }

    .controls {
        padding: 15px;
    }

    .control-group,
    .color-control {
        flex-direction: column;
        align-items: flex-start;
    }

    label {
        width: 100%;
    }
}
</style>